<template>
  <div class="search">
    <van-nav-bar left-text="" left-arrow @click-left="onClickLeft">
      <template #title>
        <div class="input">
          <van-search
            v-model="value"
            placeholder="搜索音乐、视频、歌单、歌手..."
            @search="goDetail('/home/search/searchinfo', value)"
            :clearable="false"
            :autofocus="true"
          />
        </div>
      </template>
    </van-nav-bar>
    <van-card title="搜索热词">
      <template #desc>
        <span
          @click="getValue(hotkey.k)"
          class="hotkey"
          v-for="hotkey in hotkeys"
          :key="hotkey.n"
          >{{ hotkey.k }}</span
        >
      </template>
    </van-card>
  </div>
</template>
<script>
export default {
  data: () => ({
    value: '',
    hotkeys: []
  }),
  methods: {
    async getHotkey() {
      const res = await this.$http.getHotkey()
      this.hotkeys = res.data.data
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    getValue(value) {
      this.value = value
    }
  },
  created() {
    this.getHotkey()
  }
}
</script>
<style lang="less">
body,
html {
  width: 100%;
  height: 100%;
  background-color: #f7f8fab6;
  .search {
    width: 100%;
    height: 100%;
    .van-nav-bar__content {
      background-color: #f7f8fab6;
    }
    .van-icon::before {
      color: black;
    }
    .input {
      width: 300px;
      .van-search {
        background-color: #f7f8fab6;
        .van-search__content {
          background-color: white;
          .van-field__control {
            width: 280px;
          }
        }
      }
    }
    .van-card__title {
      font-size: 16px;
      font-weight: 600;
    }
    .van-card {
      background-color: rgba(0, 0, 0, 0.055);
    }
    .hotkey {
      display: inline-block;
      border-radius: 10px;
      background-color: white;
      height: 20px;
      margin-right: 5px;
      margin-top: 5px;
      line-height: 20px;
      padding: 3px;
    }
  }
}
</style>
